import React, { useEffect, useMemo, useState } from 'react'
import styles from './index.less'
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Autoplay, Pagination } from 'swiper'
import playIcon from '../../../assets/icon/playIcon.png'
import doubleArrowRight from '../../../assets/icon/doubleArrowRight.png'
import doubleArrowLeft from '../../../assets/icon/doubleArrowLeft.png'
import { GetVideoUrl } from '../../../utils/tools'
import { E } from '../../../../../constants'
import closeImg from './close.png'
import moment from 'moment'
function Index({ data }) {
  const pattern = /\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&%$#_]*)?/
  const [mySwiper, setMySwiper] = useState()　　　　　　//swiper实例
  const [selectIndex, setSelectIndex] = useState(0)


  useMemo(() => {
    // SwiperCore.use([Autoplay, Pagination])
  }, [])

  function createVideoModal(videoUrl) {
    let src = videoUrl
    let newSwiper = document.getElementById('newSwiper')
    let div = document.createElement('div');

    div.style.position = 'absolute';
    div.style.width = '100vw';
    div.style.height = '100vh';
    div.style.backgroundColor = "rgba(0,0,0,0.8)"
    div.style.top = '0px';
    div.style.left = '0px';
    div.style.zIndex = 999;
    div.style.display = 'flex';
    div.style.alignItems = "center";


    let close = document.createElement('img');

    close.src = closeImg;
    close.style.width = '10vw';
    close.style.height = '10vw';
    close.style.position = 'absolute';
    close.style.right = '8vw';
    close.style.top = '50px';
    close.addEventListener('click', (e) => {
      e.stopPropagation()
      if (div) {
        document.body.removeChild(div)
      }
    })



    let video = document.createElement('video');
    video.webkitPlaysinline = "webkit-playsinline";
    video.playsInline = "playsinline";
    video.x5Playsinline = "x5-playsinline";
    video.xWebkitAirplay = "allow";
    video.width = '100vw'
    video.style.width = '100vw';
    video.style.maxHeight = '50vh'
    video.controls = true
    // video.src = videoUrl
    video.src = src
    div.appendChild(close)
    div.appendChild(video)
    document.body.appendChild(div)
    video.play()
  }

  let title1 = '';
  let title2 = '';
  console.log(selectIndex, 'selectIndex')
  if (data && data.length > 0) {
    if (((selectIndex + 1) <= (data.length - 1)) && ((selectIndex - 1) >= 0)) {
      title1 = data[selectIndex - 1].title
      title2 = data[selectIndex + 1].title
    }
    if (selectIndex == 0) {
      title1 = data[data.length - 1].title
      title2 = data[1].title
    }

    if (selectIndex == (data.length - 1)) {
      title1 = data[data.length - 1].title
      title2 = data[0].title
    }
  }


  return (
    <div className={styles.box} id={'newSwiper'}>
      <Swiper
        spaceBetween={0}
        slidesPerView={1}
        // loop={true}
        onSlideChange={(e) => {
          setSelectIndex(e.activeIndex)
        }}
        onSwiper={(swiper) => {
          setMySwiper(swiper)        //在创建swiper实例的时候，保存到全局变量
          // console.log(swiper.activeIndex, 'swiper.activeIndex')
          setSelectIndex(swiper.activeIndex)
        }}
      >
        {
          data && data.map((item, index) => {
            let videoUrl = GetVideoUrl(item.content)[0] && E.attchmentPrefix + GetVideoUrl(item.content)[0] || ''
            return <SwiperSlide key={`swiper${index}`}>
              <div className={`${styles.swiperItemBox} ${styles.swItem1}`}>
                <div className={styles.card}>
                  <div className={styles.imgBox}>
                    <img className={styles.img} src={E.attchmentPrefix + item.image}></img>
                  </div>
                  <div className={styles.bottom}>
                    <div className={styles.infoBox}>
                      <span className={styles.title}>{item.title}</span>
                      <span className={styles.date}>{moment(item.publishtime).format('YYYY-MM-DD')}</span>
                    </div>
                    {
                      videoUrl && <img src={playIcon} className={styles.playIcon} onClick={() => {
                        createVideoModal(videoUrl)
                      }}></img>
                    }

                  </div>
                </div>
              </div>

            </SwiperSlide>
          })
        }
      </Swiper>
      <div className={styles.swiperNavBox} >
        <div className={styles.navItem}  onClick={() => { mySwiper.slidePrev() }}>
          <img className={styles.icon} src={doubleArrowLeft} ></img>
          <span>{title2}</span>
        </div>
        <div className={styles.navItem} style={{ alignItems: "flex-end" }} onClick={() => { mySwiper.slideNext() }} >
          <img className={styles.icon} src={doubleArrowRight} ></img>
          <span>{title1}</span>
        </div>
      </div>
    </div>
  )
}

export default Index
